<!--  -->
<template>
    <div
        class="list-container"
        ref="container">
        <van-sticky>
            <div class="alllisthead">
                <div class="list-header">
                    <van-row
                        class="repairrelaterow"
                        justify="center"
                        gutter="5">
                        <van-col
                            span="8"
                            v-for="(item, index) in radiorelateList"
                            :key="index">
                            <el-button
                                type="text"
                                class="repair-relate-button"
                                :class="item.ischeck === true ? 'relatechecked' : 'relatenormalchecked'"
                                @click="onClickRelatedToMe(index, item, radiorelateList)"
                                round
                            ><span class="nameclass">{{ item.name }}</span></el-button>
                        </van-col>
                    </van-row>
                    <div class="list-header-filter">
                        <filter-selector
                            ref="filterselctor"
                            v-model:active="filterActived"
                            @resetclick="reset"
                            activedColor="#61cfbe"
                            color="rgba(255,255,255,0.8)"
                            :filterData="filterData"
                            :title="$route.meta.title"
                            @submit="onFilter"
                        />
                    </div>

                </div>
                <div class="date-list-header">
                    <div class="date-list-headerleft">
                        <div
                            class="repairrow">
                            <div
                                class="repairrowbtn"
                                v-for="(item, index) in radioButtonList"
                                :key="index">
                                <van-button
                                    class="repair-date-button"
                                    :class="item.ischeck === true ? 'repairchecked' : 'repairnomal'"
                                    @click="radiobuttonclick(index, item, radioButtonList)"
                                    round
                                >
                                    {{ item.name }}
                                </van-button>
                            </div>
                        </div>
                        <van-dropdown-menu>
                            <van-dropdown-item
                                v-model="selectDate"
                                :options="repairdateseldata"/>
                        </van-dropdown-menu>
                    </div>
                    <!-- active-color="#1890FF" -->
                    <van-dropdown-menu>
                        <van-dropdown-item
                            v-model="selectStatus"
                            :options="repairstatus"/>
                    </van-dropdown-menu>
                </div>
            </div>
        </van-sticky>
        <div class="list-content-staff">
            <maintenance-order-list
                :fnGetData="getRepairDataForStaff"
                :filter="filter"
                :memberInfo="memberInfo"
            >
            </maintenance-order-list>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { reactive, toRefs, onMounted, computed, watch, ref } from 'vue';
import FilterSelector from '@/components/_common/FilterSelector.vue';
import { getRepairDataSetup } from '@/setup/repair/RepairOrderDataSetup';
import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat';
import MaintenanceOrderList from '@/components/maintenance_control/MaintenanceOrder/MaintenanceOrderList.vue';
import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup.js';
import Cookies from 'js-cookie';
// import { selfI18n } from '@/i18n';
export default {
    name: '',
    components: {
    // MaintenanceOrderCard
        MaintenanceOrderList,
        FilterSelector
    },
    setup () {
        // const $st = selfI18n;
        const { getRepairDataForStaff } = getRepairDataSetup();
        const { repairstatus, repairdateseldata } = getRepairStatusData();
        const { getOneMemberInfo } = useMaintenanceMembersSetup();
        const filterselctor = ref(null);
        const radioButtonList = reactive([
            { val: 1, ischeck: true, name: '全部' },
            { val: 2, ischeck: false, name: '我的' }
            // { val: 1, ischeck: false, name: $st('wp_Today') },
            // { val: 2, ischeck: false, name: 7 + $st('wp_Days') },
            // { val: 3, ischeck: false, name: 30 + $st('wp_Days') }
        ]);
        const radiorelateList = reactive([
            // { val: 1, ischeck: true, name: '全部' },
            // { val: 2, ischeck: false, name: '我的工单' }
            { val: 1, ischeck: true, name: '报修工单' },
            { val: 2, ischeck: false, name: '维检工单' }
            // { val: 3, ischeck: false, name: 30 + $st('wp_Days') }
        ]);
        const state = reactive({
            showPopover: false,

            selectStatus: repairstatus[4].value,
            selectDate: repairdateseldata[0].value,
            isTodayOrder: false,
            isRelateToMe: false,
            memberInfo: {},
            filterActived: false,
            baseFilterData: {
                status: 'all',
                // 时间范围
                repairtimeend: '',
                repairtimestart: '',
                // 责任人
                administrator: '',
                company: '',
                content: '',
                manufacturecode: '',
                name: '',
                phone: '',
                repairid: '',

                username: Cookies.get('username')
            },
            customFilterData: {},
            filterData: {
                status: 'all',
                // 时间范围
                repairtimeend: '',
                repairtimestart: '',
                // 责任人
                administrator: '',
                company: '',
                content: '',
                manufacturecode: '',
                name: '',
                phone: '',
                repairid: '',
                username: Cookies.get('username')
            }
        });

        const onFilter = (data) => {
            state.isTodayOrder = false;
            state.isRelateToMe = false;
            state.selectStatus = repairstatus[4].value;
            state.customFilterData = data;
            changeFilterData();
        };
        const onSelect = async (action) => {
            state.selectStatus = action;
            state.baseFilterData.status = action.value;
            // changeFilterData();
        };

        const onClickToday = () => {
            state.isTodayOrder = !state.isTodayOrder;
        };
        const onClickRelatedToMe = (index, item, list) => {
            // state.isRelateToMe = !state.isRelateToMe;
            if (list.length !== undefined) {
                for (var i = 0; i < list.length; i++) {
                    list[i].ischeck = false;
                }
                item.ischeck = true;
                switch (index) {
                case 0:
                    state.isRelateToMe = false;
                    break;
                case 1:
                    state.isRelateToMe = true;
                    break;
                };
            };
        };
        // 改变筛选条件
        const changeFilterData = () => {
            const filerdata = {
                ...state.baseFilterData,
                ...state.customFilterData
            };

            // if (state.isTodayOrder) {
            //     filerdata.repairtimestart = moment()
            //         .startOf('day')
            //         .format('YYYY-MM-DD HH:mm:ss');
            //     filerdata.repairtimeend = moment()
            //         .endOf('day')
            //         .format('YYYY-MM-DD HH:mm:ss');
            // }

            if (state.isRelateToMe) {
                filerdata.administrator = Cookies.get('username');
            }

            state.filterData = filerdata;
        };
        const buttonChecked = (index, item, list) => {
            // calendarData.calendarBegin = '';
            // calendarData.calendarEnd = '';
            filterselctor.value.calendarData.calendarBegin = '';
            filterselctor.value.calendarData.calendarEnd = ''; ;
            for (var i = 0; i < list.length; i++) {
                list[i].ischeck = false;
            }
            item.ischeck = true;
            switch (index) {
            case 0:
                state.baseFilterData.repairtimestart = moment()
                    .startOf('day')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.baseFilterData.repairtimeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                state.customFilterData.repairtimestart = moment()
                    .startOf('day')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.customFilterData.repairtimeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                changeFilterData();
                break;
            case 1:
                state.baseFilterData.repairtimestart = moment()
                    .startOf('day')
                    .subtract(6, 'days')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.baseFilterData.repairtimeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                state.customFilterData.repairtimestart = moment()
                    .startOf('day')
                    .subtract(6, 'days')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.customFilterData.repairtimeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                changeFilterData();
                break;
            case 2:
                state.baseFilterData.repairtimestart = moment()
                    .startOf('day')
                    .subtract(29, 'days')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.baseFilterData.repairtimeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                state.customFilterData.repairtimestart = moment()
                    .startOf('day')
                    .subtract(29, 'days')
                    .format('YYYY-MM-DD HH:mm:ss');
                state.customFilterData.repairtimeend = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                changeFilterData();
                break;
            }
            console.log(list);
        };
        const radiobuttonclick = (index, item, list) => {
            if (item.ischeck === true) {
                item.ischeck = false;
                state.baseFilterData.repairtimestart = '';
                state.baseFilterData.repairtimeend = '';
                state.customFilterData.repairtimestart = '';
                state.customFilterData.repairtimeend = '';
                changeFilterData();
            } else {
                buttonChecked(index, item, list);
            }
        };
        const reset = () => {
            radioButtonList.forEach((item) => {
                item.ischeck = false;
            });
            // changeFilterData();
        };
        watch(
            () => state.selectStatus,
            (newVal, oldVal) => {
                state.filterActived = false;
                state.customFilterData = {};
                state.baseFilterData.status = newVal;
                changeFilterData();
            }
        );

        watch(
            () => state.isTodayOrder,
            (newVal, oldVal) => {
                if (newVal) {
                    state.filterActived = false;
                    state.customFilterData = {};
                }
                changeFilterData();
            }
        );

        watch(
            () => state.isRelateToMe,
            (newVal, oldVal) => {
                if (newVal) {
                    state.filterActived = false;
                    state.customFilterData = {};
                }
                changeFilterData();
            }
        );

        const filter = computed(() => {
            return state.filterData;
        });

        onMounted(async () => {
            const member = await getOneMemberInfo(Cookies.get('username'));
            state.memberInfo = member.value;
            state.filterData = {
                ...state.baseFilterData
            };
            onClickRelatedToMe();
        });

        const refData = toRefs(state);
        return {
            filter,
            onFilter,
            onClickToday,
            onClickRelatedToMe,
            onSelect,
            repairstatus,
            repairdateseldata,
            getRepairDataForStaff,
            ...refData,
            radioButtonList,
            buttonChecked,
            radiorelateList,
            reset,
            filterselctor,
            radiobuttonclick
        };
    }
};
</script>
<style lang='scss'>
.list-container {
    // height: calc(100% - 182px);
  overflow: hidden;
  background-attachment: fixed;
  background: linear-gradient(
    180deg,
    #3875c6,
    rgba(56, 117, 198, 0) 70%,
    rgba(56, 117, 198, 0) 100%
  );
    .van-dropdown-menu__bar{
        height: 24px;
        width: 90px;
        background-color: transparent;
        color: rgba($color: #ffffff, $alpha: 0.8);
        border-style:solid;
        border-width:1px;
        border-color: rgba($color: #ffffff, $alpha: 0.8);
        border-radius: 999px;

        font-size: 13px;
        font-weight: Normal;
        text-align: LEFT;
        line-height: 25px;
        // margin-bottom: 15px;
    }
    .van-dropdown-menu__title{
        margin-left: -15px;
        font-size: 13px;
        color:rgba($color: #ffffff, $alpha: 0.8);
    }
    .van-dropdown-menu__title--active{
        color: #ffffff;
    }
    .van-dropdown-item.van-dropdown-item--down{
        margin-top:15px
    }
    .van-dropdown-item__content{
        // margin-top: 15px;
    }
    .van-dropdown-item__option--active {
    color: #1890FF;
    }
    .van-dropdown-item__option--active .van-dropdown-item__icon{
        color: #1890FF;
    }
}
.alllisthead{
    // height: 106px;
    // margin-bottom:15px;
    // padding-bottom: 15px;
    // background: linear-gradient(#3875c6,#5d8cca);
}
.list-header {
    width:calc(100% - 30px);
  padding: 10px 15px 0px;
    display: flex;
    justify-content: space-between;
//   justify-content:flex-start;
  align-items: flex-start;
// padding: 15px 10px 5px;
//   z-index: 9;
}
.list-header-btn {
    float: left;
  min-width: 90px;
  background-color: transparent;
  color: rgba($color: #ffffff, $alpha: 0.8);
  border-color: rgba($color: #ffffff, $alpha: 0.8);
  font-size: 13px;
  margin-left: 15px;
}
.list-header-filter {
    height: 25px;
    line-height:25px;
    // position: absolute;
    //color: rgba($color: #ffffff, $alpha: 0.8);
    // margin-left: 15px;
    // right:15px
}
.list-content-staff {
    // margin-top: 10px;
    z-index: -1;
    height: calc(100vh - 157px);
    overflow: scroll;
}
.selected {
  background-color: #61cfbe;
  border: 1px solid #61cfbe;
}
.date-list-header{
    margin-top:10px;
    width:calc(100% - 30px);
    // margin-bottom: 15px;
    padding: 10px 15px 15px;
    // padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .date-list-headerleft{
        width: 60%;
    display: flex;
    justify-content: flex-start;

    }

}
.repairrow {
    display: flex;
    flex-wrap: nowrap;
    // width: 60%;
// height: 25px;
//   margin-top: 10px;
// margin-bottom: 15px;
.repairrowbtn{
    margin-right: 8px;
}
}
.repairchecked {
  color: #ffffff;
  border-color: #61cfbe;
  opacity: 1;
 background: #61cfbe;
}
.repairnomal{
     color: #ffffff;
//   border-color: #61cfbe;
//   opacity: 1;
//     width: 58px;
// height: 25px;
border: 1px solid rgba(255,255,255,0.20);
border-radius: 13px;
background: rgba(255,255,255,0);

}
.repair-date-button {
  width: 100%;
  height: 25px;
  white-space: nowrap;
}
.repairrelaterow {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    // width:70%
//   margin-top: 10px;
}
.relatechecked {
    color: #ffffff;
    // padding-bottom: 10px;
font-size:18px;
border-bottom:3px solid #61cfbe;
//   height: 25px;
  white-space: nowrap;
//   color: #1890ff;
//   border-color: black;
//   opacity: 1;
//   background: #e8f4ff;
//   border: 1px solid #1890ff;
}
.relatenormalchecked{
     color: #ffffff;
    // padding-bottom: 10px;
font-size:15px;
// border-bottom:3px solid #61cfbe;
//   height: 25px;
  white-space: nowrap;
}
.repair-relate-button {
  width: 100%;
// padding-bottom: 10px;
// margin-bottom: 10px;
color: #ffffff;
margin-right: 15px;
// font-size:15px;
// border-bottom:3px solid #61cfbe;
//   height: 25px;
  white-space: nowrap;
  .nameclass{
      height: 25px;
      line-height: 25px;
    //   margin-bottom: 10px;
  }
}
</style>
